import React from "react";
import { Row, Col } from "antd";

import DataTable from "../components/DataTable";
import Header from "./Header";
import FormModal from "./FormModal";
import { useRoles } from "../hooks/useRoles";

const Home = () => {
  const { roles } = useRoles();

  return (
    <>
      <Row gutter={16}>
        <Col style={{ background: "transparent", border: 0 }} span={24}>
          <div
            style={{
              minHeight: "100vh",
              background: "#ffffff",
              padding: "5px 0"
            }}
          >
            <div style={{ padding: 20 }}>
              <Header />
              <DataTable />
            </div>
          </div>
        </Col>
      </Row>
      <FormModal roles={roles} />
    </>
  );
};

export default Home;
